<!--基本-->
<style>
    .relative_span{
        display: inline-block;
        padding: 10px;
        width: auto;
        background-color: #D3D6DA;
        border-radius: 5px;
        font-weight: bold;
        margin: 5px;
    }
</style>
<div class="form-group">
    <label class="control-label col-xs-2">
        选择商品
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <div class="row">
            <div class="col-xs-4">
                <select id="good_list_rec" class="chosen-select form-control">
                    <option value=""></option>
                    {foreach $good_list as $good}
                    <option value="{$good.id}">{$good.title}</option>
                    {/foreach}
                </select>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-xs-2">
        热门推荐商品
        <span style="color: #FF0000;">*</span>
    </label>
    <div class="col-xs-9">
        <div class="row">
            <div class="col-xs-12 relativeGoodRec">
                {foreach $rec_list as $rec}
                <span class="relative_span good_{$rec.id}">
                    {$rec.title}
                    <div class="close removeRelative">×</div>
                    <input type="hidden" name="recommend_id[]" value="{$rec.id}">
                </span>
                {/foreach}
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $("#good_list_rec").select2({
            placeholder: "选择热门推荐商品",
            allowClear: true,
            width: "100%"
        });
        $(".relativeGoodRec").on("click", ".removeRelative", function () {
            let o = this;
            layer.confirm("确定移除此热门推荐商品？",function (index) {
                $(o).parent().remove();
                layer.close(index);
            })
        });
        $("#good_list_rec").change(function () {
            let id = $(this).val();
            let title = $(this).find("option:selected").text();
            let _span = '<span class="relative_span good_'+id+'">' +
                title+
                '                    <div class="close removeRelative">×</div>' +
                '                    <input type="hidden" name="recommend_id[]" value="'+id+'">' +
                '                </span>';
            let exists = $(".relativeGoodRec").find(".good_"+id);
            if(exists.length>0){
                return;
            }else{
                $(".relativeGoodRec").append(_span);
            }
        });
    })
</script>




